<template>
  <div class="flex flex-col h-full">
    <SearchContainer @reset="() => formRef.resetFields()" @search="getData()">
      <a-form ref="formRef" class="form-style-flex" :model="formState">
        <a-form-item name="psnNo" class="w-72 mr-5">
          <a-input v-model:value="formState.psnNo" placeholder="人员编号" allow-clear />
        </a-form-item>
        <a-form-item name="dateRange" label="结算日期" class="w-[300px]">
          <a-range-picker v-model:value="formState.dateRange" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
        </a-form-item>
        <a-form-item name="outFlag" class="w-72 ml-8">
          <a-radio-group v-model:value="formState.outFlag">
            <a-radio :value="0">本地</a-radio>
            <a-radio :value="1">异地</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </SearchContainer>
    <a-spin :spinning="loading">
      <template v-if="tableList.length">
        <div class="h-full overflow-auto">
          <a-card v-for="(item, index) in tableList" :key="index" class="mt-2">
            <div class="flex items-center">
              <div class="mt-3">
                <a-descriptions :column="7">
                  <a-descriptions-item label="人员编号"> {{ item.psnNo }}</a-descriptions-item>
                  <a-descriptions-item label="人员姓名"> {{ item.psnName }}</a-descriptions-item>
                  <a-descriptions-item label="结算ID" :span="2"> {{ item.setlId }}</a-descriptions-item>
                  <a-descriptions-item label="原结算ID"> {{ item.initSetlId }}</a-descriptions-item>
                  <a-descriptions-item label="就诊ID"> {{ item.mdtrtId }}</a-descriptions-item>
                </a-descriptions>
                <a-descriptions :column="7">
                  <a-descriptions-item label="医药机构结算ID" :span="4"> {{ item.medinsSetlId }}</a-descriptions-item>
                  <a-descriptions-item label="医疗费总额"> {{ item.medfeeSumamt }}</a-descriptions-item>
                  <a-descriptions-item label="退费结算标志"> {{ item.refdSetlFlag }}</a-descriptions-item>
                  <a-descriptions-item label="年度"> {{ item.year }}</a-descriptions-item>
                </a-descriptions>
                <a-descriptions :column="7">
                  <a-descriptions-item label="经办人" :span="2"> [{{ item.opterId }}][{{ item.opterName }}]</a-descriptions-item>
                  <a-descriptions-item label="经办时间" :span="2"> {{ item.optTime }}</a-descriptions-item>
                  <a-descriptions-item label="定点医药机构编号"> {{ item.fixmedinsCode }}</a-descriptions-item>
                  <a-descriptions-item label="定点医药机构名称"> {{ item.fixmedinsName }}</a-descriptions-item>
                </a-descriptions>
              </div>
            </div>
          </a-card>
        </div>
      </template>
      <template v-else>
        <div class="mt-40">
          <a-empty description="暂无数据" />
        </div>
      </template>
    </a-spin>
  </div>
</template>

<script setup>
// import { onMounted } from 'vue'
import dayjs from 'dayjs'
import { message } from 'ant-design-vue'
import { post } from '@/utils/request'

const formRef = ref(null)
const tableList = ref([])
const loading = ref(false)
const formState = ref({
  dateRange: [dayjs().subtract(1, 'month').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
  outFlag: 0
})

const getData = async () => {
  if (!formState.value.psnNo) return message.error('请输入人员编号')
  loading.value = true
  const { code, data, msg } = await post('/insureReconciliation/getNmiSettlementInfoList', {
    ...formState.value,
    stDate: formState.value.dateRange?.[0],
    edDate: formState.value.dateRange?.[1]
  })
  loading.value = false
  if (code !== 0) {
    message.error(msg)
    tableList.value = []
  } else {
    tableList.value = data
  }
}
</script>
<style lang="less" scoped></style>
